<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标准属性</title>
</head>
<body>
    <div id="app">
        <div class="houdunren" data="hd">houdunren.com</div>
        <div class="hdcms">hdcms.com</div>
    </div>
    <img src="" alt="" />

    <input type="number" name="age" value="88" />
    <br />
    <label for="hot"><input type="checkbox" name="hot">热门</label>
    <a href="#houdunren" id="home">后盾人</a>
    <script>
        //操作属性
        // const app = document.querySelector("#app");
        // //给元素添加类
        // app.className = 'houdunren hdcms';

        //设置图像的标准属性
        // let img = document.images[0];
        // img.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608032684165&di=fbe3b000fa4ac7bb967508dd8c4bb458&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F25%2F99%2F19300000421423134190997943822.jpg';
        // img.alt = '后盾人';
        // img.title = '香水有毒';
        // console.log(img);

        //使用hidden隐藏元素
        // const app = document.querySelector(`#app`);
        // app.addEventListener('click',function(){
        //     this.hidden = true;
        // });


        //多类型
        //大部分属性值都是字符串,但并不是全部,下例中需要先转化为整数再进行运算
        // let input = document.getElementsByName('age').item(0);
        // input.value = parseInt(input.value) + 100;
        // console.log(input);

        //下面表单checked属性值为Boolean类型
        // const node = document.querySelector(`[name='hot']`);
        // console.log(node);
        // node.addEventListener('change',function(){
        //     console.log(this.checked);
        // });
        

        //属性值定义与HTML定义的值一样，下面的href属性值是完整链接
        const node = document.querySelector(`#home`);
        console.log(node.href);




    </script>
</body>
</html>